<template>
  <div class="el-custom-from" v-loading="formLoading">
    <el-tabs v-model="activeName" class="node-tabs-kts">
      <el-tab-pane name="property">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("flowi18n.flow_branch_property") }}
            </span>
          </div>
        </template>
        <div id="From_div_style">
          <el-container>
            <el-main id="el-custom-form-main" style="margin-right: 10px">
              <div class="container form-container">
                <el-scrollbar>
                  <el-form
                    ref="propertyData"
                    :model="nodeproperty.meta"
                    label-width="100px"
                    class="demo-ruleForm"
                    size="mini"
                    :rules="rules"
                  >
                    <el-col style="width: 100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_CnName')"
                        prop="cnName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.cnName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%">
                      <el-form-item
                        size="small"
                        :label="$t('flowi18n.flow_step_property_EnName')"
                        prop="enName"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.enName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop !== 'endbranch'"
                    >
                      <el-form-item
                        size="small"
                        label="分支标识"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.branchTag"></el-input>
                        <el-alert
                          title="分支标识仅在并行分支中使用！"
                          type="warning"
                          show-icon
                          :closable="false"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop !== 'endbranch'"
                    >
                      <el-form-item
                        size="small"
                        label="并行分支"
                        prop="line"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.line"
                          class="m-2"
                          placeholder="选择并行分支"
                        >
                          <el-option
                            v-for="item in branchLines"
                            :key="item.value"
                            :label="item.label"
                            :value="`${item.value + ''}`"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="nodeproperty.meta.prop == 'endbranch'"
                    >
                      <el-form-item
                        size="small"
                        label="开始分支"
                        prop="startGroup"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.startGroup"
                          class="m-2"
                          placeholder="选择开始分支"
                        >
                          <el-option
                            v-for="item in branchs"
                            :key="item.value"
                            :label="item.label"
                            :value="`${item.value + ''}`"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%" v-if="nodeproperty.meta.prop == 'branch'">
                      <el-form-item
                        size="small"
                        label="审批策略"
                        prop="branchStrategy"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.branchStrategy"
                          class="m-2"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in approvalStargetys"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="
                        nodeproperty.meta.prop == 'branch' &&
                        nodeproperty.meta.branchStrategy == '2'
                      "
                    >
                      <el-form-item
                        size="small"
                        label="审批比例"
                        prop="approvalScale"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.approvalScale"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%" v-if="nodeproperty.meta.prop == 'branch'">
                      <el-form-item
                        size="small"
                        label="终止策略"
                        prop="endStrategy"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.endStrategy"
                          class="m-2"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in endStargetys"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="
                        nodeproperty.meta.prop == 'branch' &&
                        nodeproperty.meta.endStrategy == '2'
                      "
                    >
                      <el-form-item
                        size="small"
                        label="终止比例"
                        prop="endScale"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.endScale"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width: 100%" v-if="nodeproperty.meta.prop == 'branch'">
                      <el-form-item
                        size="small"
                        label="退回策略"
                        prop="backStrategy"
                        class="el-from-custom-item"
                      >
                        <el-select
                          v-model="nodeproperty.meta.backStrategy"
                          class="m-2"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in backStargetys"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      style="width: 100%"
                      v-if="
                        nodeproperty.meta.prop == 'branch' &&
                        nodeproperty.meta.backStrategy == '2'
                      "
                    >
                      <el-form-item
                        size="small"
                        label="退回比例"
                        prop="backScale"
                        class="el-from-custom-item"
                      >
                        <el-input v-model="nodeproperty.meta.backScale"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button plain type="primary" @click="SaveEvent()" size="mini">{{
                  $t("table.Global_Save")
                }}</el-button>

                <el-button plain type="danger" @click="BackEvent()" size="mini">{{
                  $t("table.Global_Back")
                }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    oldproperty: {
      type: Object,
      default: () => ({}),
    },
    bindproperty: {
      type: Object,
      default: () => ({}),
    },
    stepproperty: {
      type: Object,
      default: () => ({}),
    },
    branchs: {
      type: Array,
      default: () => [],
    },
    lines: {
      type: Array,
      default: () => [],
    },
  },
  name: "flow-node-property",
  data() {
    return {
      formLoading: false,
      newNode: this.stepproperty,
      nodeproperty: this.bindproperty,
      oldnode: this.oldproperty,
      newBranchs: this.branchs,
      newLines: this.lines,
      branchLines: [],
      autoHeight: {
        height: "",
        width: "97%",
        margin: "11px",
        float: "left",
      },
      contentHeight: {
        height: "",
      },
      approvalStargetys: [
        { label: "一个分支通过则通过", value: "0" },
        { label: "所有分支通过则通过", value: "1" },
        { label: "按分支比例通过", value: "2" },
      ],
      backStargetys: [
        { label: "一个分支退回则退回", value: "0" },
        { label: "所有分支退回则退回", value: "1" },
        { label: "按分支比例退回", value: "2" },
      ],
      endStargetys: [
        { label: "一个分支终止则终止", value: "0" },
        { label: "所有分支终止则终止", value: "1" },
        { label: "按分支比例终止", value: "2" },
      ],
      activeName: "property",
      ///数据验证规则
      rules: {
        cnName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_CNName_length"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("errori18n.err_flow_CNName"),
            trigger: "blur",
          },
        ],
        enName: [
          {
            min: 1,
            max: 50,
            message: this.$t("errori18n.err_flow_ENName_length"),
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
    },
    SaveEvent() {
      this.$refs["propertyData"].validate((valid) => {
        if (valid) {
          this.saveData(this.nodeproperty);
          this.$emit("FlowNodePropetryEvent");
        } else {
          return false;
        }
      });
    },
    BackEvent() {
      this.saveData(this.oldproperty);
      this.$emit("FlowNodePropetryEvent");
    }, ///初始化节点属性
    saveData(property) {
      this.newNode.meta.cnName = property.meta.cnName;
      this.newNode.meta.enName = property.meta.enName;
      this.newNode.meta.startGroup = property.meta.startGroup;
      this.newNode.meta.backScale = property.meta.backScale;
      this.newNode.meta.approvalScale = property.meta.approvalScale;
      this.newNode.meta.backStrategy = property.meta.backStrategy;
      this.newNode.meta.branchStrategy = property.meta.branchStrategy;
      this.newNode.meta.endScale = property.meta.endScale;
      this.newNode.meta.endStrategy = property.meta.endStrategy;
      this.newNode.meta.branchTag = property.meta.branchTag;
      this.newNode.meta.line = property.meta.line;
      const Lines = property.meta.line || "";
      console.log("tag", Lines);
      let groups = "";
      let arryGroup = [];
      if (Lines != "") {
        let arryGroup = [];
        const grs = Lines.split("$");
        grs.forEach((element) => {
          if ((element != null) & (element != "")) {
            const gline = element.split("#");
            if (gline.length > 0) {
              if (gline[0] != null && gline[0] != "") {
                arryGroup.push({
                  branch: gline[0],
                  line: "",
                });
                arryGroup.push({
                  branch: gline[0],
                  line: gline[1],
                });
              }
            }
          }
        });
      }
      if (property.meta.prop == "branch")
        arryGroup.push({
          branch: property.meta.branchTag,
          line: "",
        });
      if (arryGroup.length > 0) groups = JSON.stringify(arryGroup);
      this.newNode.meta.groups = groups;
    },
    InitBranchLines() {
      this.branchs.forEach((element) => {
        if (
          element.value !== this.nodeproperty.meta.stepId &&
          element.tag != null &&
          element.tag != ""
        ) {
          const parallelTask = this.newLines.filter((o) => o.startId === element.value);
          if (parallelTask !== undefined && parallelTask !== null) {
            parallelTask.forEach((ele) => {
              this.branchLines.push({
                label: `${element.label}(${element.tag})-${ele.meta.cnName}(${ele.meta.branchTag})`,
                value: `${element.line || ""}$${element.tag || ""}#${ele.meta.branchTag}`,
              });
            });
          }
        }
      });
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.InitBranchLines();
  },
  components: {},
};
</script>

<style></style>
